<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <title>并夕夕</title>
    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
    <style>
        /*元素选择器*/

        html {
            height: 100%;
        }

        body {
            height: 100%;
            padding: 0px;
            /*内边距*/
            margin: 0px;
            /*外边距*/
        }
        .my-title{
            font-size:30px;
            text-align: center;/*水平居中*/
            color:#111111;
            padding-top:10px;
            padding-bottom:0px;
        }
    </style>
</head>

<body>
    <!-- div ：矩形区域 -->
    <div id="app">

        <wv-header title="并夕夕" :fixed="false" background-color="#ff0033">
            <div slot="left">
                <i class="fa fa-angle-left" @click="back"></i>
            </div>
        </wv-header>

        <div class="my-title">订单详情</div>

        <div class="weui-form-preview">
            <div class="weui-form-preview__hd">
                <label class="weui-form-preview__label">付款金额</label>
                <em class="weui-form-preview__value">{{dep.p_price}}</em>
            </div>
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item ">
                    <label class="weui-form-preview__label">商品</label>
                    <span class="weui-form-preview__value">{{dep.p_name}}</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">收货人</label>
                    <span class="weui-form-preview__value">{{per.b_name}}</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">收货地址</label>
                    <span class="weui-form-preview__value">{{per.b_add}}</span>
                </div>
            </div>

            <div class="weui-form-preview__ft" style="margin-top:20px;">
                <button type="submit" @click="depDoAdd" class="weui-form-preview__btn weui-form-preview__btn_primary">加入购物车</button>
                <button type="submit" @click="buy" class="weui-form-preview__btn weui-form-preview__btn_primary">确认购买</button>
            </div>
            
        </div>

    </div>

</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    //Vue对象的作用就是渲染界面,需要绑定一个元素
    new Vue({
        el: '#app',
        data: {
            dep: {},
            per: {},
        },
        methods: {
            back() {
                window.location.href = 'page.html';
            },
            loadList1() {
                Serv.loadData({ url: '/order.jsp' }, (dep) => {
                    this.dep = dep;
                    console.log(this.dep);
                });
            },
            loadList2() {
                Serv.loadData({ url: '/person.jsp' }, (per) => {
                    this.per = per;
                });
            },
            buy() {
                Serv.operate({ url: '/buy.jsp', },
                );
            },
            depDoAdd() {
                Serv.operate({ url: '/basketadd.jsp' },
                );
            },
        },
        mounted() {
            this.loadList1();
            this.loadList2();
        },

    });

</script>

</html>